/*
 *  Articles.js
 *  created by qinghong
 *  2016-7-11
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    ScrollView,
    WebView
} from 'react-native';

import Moment from 'moment';
import constant from './constant';
import ZanView from '../../com/ZanView';

export default class Article extends Component {

    render() {
        //let dateStr = Moment().format('MMMM DD, YYYY');
        //let title = this.state.articleData.strContTitle;
        //let author = this.state.articleData.strContAuthor;
        //
        //let contentHtml = this.state.articleData.strContent;
        ///*let brNum = contentHtml.split('<br>').length;
        // let htmlFontSize = 17;
        // let htmlLineNum = contentHtml.length * htmlFontSize / (Constants.window.screenWidth - 25);
        // let webViewHeight = htmlLineNum * (htmlFontSize + 3) + brNum * htmlFontSize;
        // // alert('webViewHeight-'+webViewHeight);
        // // 仍存在问题:html字体,颜色透明,webView高度
        // */
        //
        //let authorIntroduce = this.state.articleData.strContAuthorIntroduce;
        //let zanNum = this.state.articleData.strPraiseNumber;
        //
        //
        //let jsCode = `
        //        document.title = document.height;
        //    `;



        let dateStr = Moment().format('MMMM DD, YYYY');
        let title = "我在学习RN";
        let author = "青虹";

        let contentHtml = "度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算度哈手机的哈开始就很大声的卡是打算打算打算";

        let authorIntroduce = "这是作者这是作者";
        let zanNum = "12234";



        return (
            <View style={styles.article}>
                <ScrollView style={styles.scrollView}>
                    <Text style={{marginLeft: 10, marginTop: 5, fontSize: 12}}>{dateStr}</Text>
                    <Text style={{marginLeft: 10, marginTop: 5, fontSize: 18}}>{title}</Text>
                    <Text style={{marginLeft: 10, marginTop: 5, fontSize: 10}}>{author}</Text>
                    <WebView style={[styles.webView, {height: 100}]}
                             source={{html: contentHtml}}
                             scrollEnabled={false}
                             //onNavigationStateChange={this.onNavigationStateChange.bind(this)}
                             //injectedJavaScript={jsCode}
                        //onLoadEnd={function(){}}
                        //onLoadStart={function(){}}
                    />
                    <Text style={{marginLeft: 10, marginTop: 5, fontSize: 10}}>{authorIntroduce}</Text>
                    <View style={{height: 50, marginTop: 20, marginBottom: 10,
                                    justifyContent: 'center', alignItems: 'flex-end'}}>
                        <ZanView zanNum={zanNum} style={styles.zanView}/>
                    </View>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    article: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingTop: 64,
        paddingBottom: 49
    },
    scrollView: {
        width: constant.window.screenWidth,
        height: constant.window.screenHeight - 64 - 49
    },
    webView: {
        width: constant.window.screenWidth - 10,
        marginTop: 10,
        marginHorizontal: 5
    },
    zanView: {
        height: 36,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: 'gray',
        borderRadius: 18,
        borderWidth: 0.5,
        right: -18
    }
});

